<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row :gutter="10" class="dashboard-wrap">
        <el-col :span="19">
          <!-- 左侧看板 -->
          <!-- 快捷入口 -->
          <compare />
          <quick-link />
          <!-- 工单完成情况分布 -->
          <div class="work-order">
            <div class="top">
              <div class="left">
                <div class="title">工单完成分布情况</div>
                <el-button-group>
                  <el-button type="primary" size="mini">按日</el-button>
                  <el-button size="mini">按周</el-button>
                  <el-button size="mini">按月</el-button>
                </el-button-group>
              </div>
              <div class="right">
                <el-date-picker
                  size="mini"
                  v-model="date1"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="getDateInterval()"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="content">
              <work-order />
            </div>
          </div>
          <!-- 销售订单和跟踪 -->
          <!-- <div class="sale-order-container">
            <div class="sale-order work-order">
              <div class="top">
                <div class="left">
                  <div class="title">销售订单和跟踪</div>
                  <el-button-group>
                    <el-button type="primary" size="mini">按日</el-button>
                    <el-button size="mini">按周</el-button>
                    <el-button size="mini">按月</el-button>
                  </el-button-group>
                </div>
                <div class="right">
                  <el-date-picker
                    size="mini"
                    v-model="date2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="getDateInterval()"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="content">
                <sale-order />
              </div>
            </div>
            <div class="sale-goods work-order">
              <div class="top">
                <div class="left">
                  <div class="title">销售出货进度跟踪</div>
                </div>
              </div>
              <div class="content">
                <sale-goods :saleOrderList="saleOrderList" />
              </div>
            </div>
          </div> -->

          <!-- <el-row :gutter="10" class="sale-inout-wrap">
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="sale-inout-box">
                <el-row class="actions">
                  <el-col :span="24" class="col">
                    <div class="title">已收款和未收款情况</div>
                    <el-button-group>
                      <el-button type="primary" size="mini">按日</el-button>
                      <el-button size="mini">按周</el-button>
                      <el-button size="mini">按月</el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
                <fund />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="sale-inout-box">
                <el-row class="actions">
                  <el-col :span="24" class="col">
                    <div class="title">销售订单客户分布</div>
                    <el-button-group>
                      <el-button type="primary" size="mini">按日</el-button>
                      <el-button size="mini">按周</el-button>
                      <el-button size="mini">按月</el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
                <customer />
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
              <div class="sale-inout-box">
                <el-row class="actions">
                  <el-col :span="24" class="col">
                    <div class="title">销售产品分布</div>
                    <el-button-group>
                      <el-button type="primary" size="mini">按日</el-button>
                      <el-button size="mini">按周</el-button>
                      <el-button size="mini">按月</el-button>
                    </el-button-group>
                  </el-col>
                </el-row>
                <product-dis />
              </div>
            </el-col>
          </el-row> -->
        </el-col>
        <el-col :span="5" class="message-box-wrap">
          <!-- 快捷入口 -->
          <!-- <div class="quick-link">
            <div class="link" v-for="(item, index) in menus" :key="index">
              <i class="el-icon-document icon"></i>
              <div class="title">{{ item.title }}</div>
            </div>
          </div> -->
          <!-- 右侧消息 -->
          <div class="message-box">
            <div class="header">
              <div class="left">我的消息</div>
              <div class="right">
                <i class="el-icon-refresh-right icon" @click="onRefesh"></i>
                <i class="el-icon-more icon" @click="showMore"></i>
              </div>
            </div>
            <div class="content">
              <el-alert
                class="msg-item"
                v-for="(item, index) in msgList"
                :key="index"
                type="success"
              >
                <div slot="title" class="title">
                  <div class="left">{{ item.label }}</div>
                  <div class="right">5</div>
                </div>
              </el-alert>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="10">
        <el-col :span="24">
          <div class="sale-order-container">
            <div class="sale-order work-order">
              <div class="top">
                <div class="left">
                  <div class="title">销售订单和跟踪</div>
                  <el-button-group>
                    <el-button type="primary" size="mini">按日</el-button>
                    <el-button size="mini">按周</el-button>
                    <el-button size="mini">按月</el-button>
                  </el-button-group>
                </div>
                <div class="right">
                  <el-date-picker
                    size="mini"
                    v-model="date2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="getDateInterval()"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="content">
                <sale-order />
              </div>
            </div>
            <div class="sale-goods work-order">
              <div class="top">
                <div class="left">
                  <div class="title">销售出货进度跟踪</div>
                </div>
              </div>
              <div class="content">
                <sale-goods :saleOrderList="saleOrderList" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row> -->
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :lg="16">
          <div class="sale-order work-order">
            <div class="top">
              <div class="left">
                <div class="title">销售订单和跟踪</div>
                <el-button-group>
                  <el-button type="primary" size="mini">按日</el-button>
                  <el-button size="mini">按周</el-button>
                  <el-button size="mini">按月</el-button>
                </el-button-group>
              </div>
              <div class="right">
                <el-date-picker
                  size="mini"
                  v-model="date2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="getDateInterval()"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="content">
              <sale-order />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="sale-goods work-order">
            <div class="top">
              <div class="left">
                <div class="title">销售出货进度跟踪</div>
              </div>
            </div>
            <div class="content">
              <sale-goods :saleOrderList="saleOrderList" />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="sale-inout-wrap">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="sale-inout-box">
            <el-row class="actions">
              <el-col :span="24" class="col">
                <div class="title">已收款和未收款情况</div>
                <el-button-group>
                  <el-button type="primary" size="mini">按日</el-button>
                  <el-button size="mini">按周</el-button>
                  <el-button size="mini">按月</el-button>
                </el-button-group>
              </el-col>
            </el-row>
            <fund />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="sale-inout-box">
            <el-row class="actions">
              <el-col :span="24" class="col">
                <div class="title">销售订单客户分布</div>
                <el-button-group>
                  <el-button type="primary" size="mini">按日</el-button>
                  <el-button size="mini">按周</el-button>
                  <el-button size="mini">按月</el-button>
                </el-button-group>
              </el-col>
            </el-row>
            <customer />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="sale-inout-box">
            <el-row class="actions">
              <el-col :span="24" class="col">
                <div class="title">销售产品分布</div>
                <el-button-group>
                  <el-button type="primary" size="mini">按日</el-button>
                  <el-button size="mini">按周</el-button>
                  <el-button size="mini">按月</el-button>
                </el-button-group>
              </el-col>
            </el-row>
            <product-dis />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
//快捷入口
import QuickLink from './components/QuickLink.vue'
import Compare from './components/Compare.vue'
import WorkOrder from './components/WorkOrder.vue'
import { getDateInterval } from '@/utils/customFilter'
import SaleOrder from './components/SaleOrder.vue'
import SaleGoods from './components/SaleGoods.vue'
import Fund from './components/Fund.vue'
import Customer from './components/Customer.vue'
import ProductDis from './components/ProductDis.vue'
//销售开单  采购开单  生产报工  合同  入库
export default {
  name: 'Dashboard',
  components: {
    //快捷入口
    QuickLink,
    Compare,
    WorkOrder,
    SaleOrder,
    SaleGoods,
    Fund,
    Customer,
    ProductDis,
  },
  data() {
    return {
      //快捷入口
      menus: [
        {
          id: 1,
          title: '销售开单',
          route: '',
          icon: 'peoples',
        },
        {
          id: 2,
          title: '采购开单',
          route: '',
        },
        {
          id: 3,
          title: '生产报工',
          route: '',
        },
        {
          id: 4,
          title: '入库管理',
          route: '',
        },
        {
          id: 5,
          title: '入库管理',
          route: '',
        },
        {
          id: 6,
          title: '入库管理',
          route: '',
        },
      ],
      date1: '',
      date2: '',
      saleOrderList: [
        {
          id: 1,
          order: 'XS2112080001',
          progress: 33.33,
        },
        {
          id: 2,
          order: 'XS2112080002',
          progress: 25,
        },
        {
          id: 3,
          order: 'XS2112080003',
          progress: 100,
        },
        {
          id: 4,
          order: 'XS2112080007',
          progress: 66.57,
        },
        {
          id: 5,
          order: 'XS2112080004',
          progress: 26,
        },
        {
          id: 6,
          order: 'XS2112080010',
          progress: 0,
        },
        {
          id: 7,
          order: 'XS2112080010',
          progress: 0,
        },
        {
          id: 8,
          order: 'XS2112080010',
          progress: 0,
        },
      ],
      msgList: [
        {
          id: 1,
          label: '销售开单',
          msgNum: 5,
          route: '',
          color: 'rgb(105,161,249)',
        },
        {
          id: 2,
          label: '采购开单',
          msgNum: 5,
          route: '',
          color: 'rgb(105,161,249)',
        },
        {
          id: 3,
          label: '生产报工',
          msgNum: 5,
          route: '',
          color: 'rgb(105,161,249)',
        },
        {
          id: 4,
          label: '入库管理',
          msgNum: 5,
          route: '',
          color: 'rgb(105,161,249)',
        },
        {
          id: 5,
          label: '销售开单',
          msgNum: 5,
          route: '',
          color: 'rgb(105,161,249)',
        },
      ],
    }
  },
  methods: {
    getDateInterval,
    //显示更多
    showMore() {
      this.$router.push('/message')
    },
    //消息列表刷新
    onRefesh() {},
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;
  min-width: 1500px;
  .dashboard-wrap {
    .message-box-wrap {
      height: 100%;
      // .quick-link {
      //   background: #fff;
      //   border-radius: 8px;
      //   padding: 15px;
      //   display: flex;
      //   flex-direction: row;
      //   justify-content: center;
      //   align-items: center;
      //   flex-wrap: wrap;
      //   .link {
      //     width: 48%;
      //     height: 140px;
      //     background-image: linear-gradient(
      //       to right,
      //       rgba(105, 161, 249, 0.7),
      //       rgba(105, 161, 249, 0.9)
      //     );
      //     margin: 1px;
      //     display: flex;
      //     flex-direction: column;
      //     justify-content: center;
      //     align-items: center;
      //     color: #fff;
      //     .icon {
      //       font-size: 30px;
      //     }
      //     .title {
      //       font-size: 18px;
      //       margin-top: 10px;
      //     }
      //   }
      //   .link:hover {
      //     cursor: pointer;
      //     background-color: rgb(92, 123, 217);
      //   }
      // }
      .message-box {
        border-radius: 8px;
        padding: 15px;
        background: #fff;
        // margin-top: 10px;
        .header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          .left {
            flex: 1;
            font-size: 20px;
          }
          .right {
            width: 80px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            // background-color: red;
            flex-shrink: 0;
            .icon {
              font-size: 22px;
            }
          }
        }
        .content {
          overflow-y: auto;
          padding: 20px 0;
          // height: 1538px;
          height: 718px;
          .msg-item {
            height: 70px;
            margin-bottom: 20px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // color: #fff;
            padding: 0 15px;
            // background-color: ;
            .title {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              // align-items: center;
            }
          }
        }
      }
    }
  }

  .sale-inout-wrap {
    .sale-inout-box {
      background: #fff;
      padding: 20px 15px 0;
      border-radius: 8px;
      .actions {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .col {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
        .title {
          font-size: 18px;
          text-align: left;
          font-weight: bold;
        }
      }
    }
  }

  //restart
  .work-order {
    background: #fff;
    padding: 20px 15px 0;
    margin-bottom: 10px;
    border-radius: 8px;
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .left {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        .title {
          font-size: 18px;
          font-weight: bold;
        }
      }
      .right {
        width: 360px;
        flex-shrink: 0;
      }
    }
    .content {
      flex: 1;
    }
  }
  // .sale-order-container {
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: space-between;
  //   align-items: center;
  //   .sale-order {
  //     flex: 1;
  //   }
  //   .sale-goods {
  //     width: 540px;
  //     flex-shrink: 0;
  //     margin-left: 10px;
  //     padding-bottom: 20px;
  //   }
  // }
  .sale-goods {
    padding-bottom: 18px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
